<template>
	<div id="aside">
		<ul class="aside_title">
			<li>门禁钥匙管理系统</li>
			<li>门禁钥匙APP</li>
		</ul>
		<div class="content">
			<ul class="content_list" style="display:block">
					<router-link tag="li" to='/index/map' @click.native="pull">
						<i class="el-icon-picture"></i>
						站点地图
					</router-link>
					<li>
						<i class="el-icon-document"></i> 数据报表
						<span class="el-icon-d-caret"></span>
						<ul class="ul_active aside_list">
							<li>
								<router-link to='/index/data1' @click.native="pull">开门记录</router-link>
							</li>
							<li>
								<router-link to='/index/data2' @click.native="pull">告警记录</router-link>
							</li>
							<li>
								<router-link to='/index/data3' @click.native="pull">开门统计</router-link>
							</li>
							<li>
								<router-link to='/index/data4' @click.native="pull">门锁统计</router-link>
							</li>
						</ul>
					</li>
					<router-link tag="li" to='/index/powmanage' @click.native="pull">
						<i class="el-icon-information"></i>
						授权管理
					</router-link>

					<router-link tag="li" to='/index/toolmanage' @click.native="pull">
						<i class="el-icon-menu"></i>
						锁具管理
					</router-link>
					<li>
						<i class="el-icon-message"></i> 钥匙管理
						<span class="el-icon-d-caret"></span>
						<ul class="aside_list">
							<li>
								<router-link to='/index/localmanage1' @click.native="pull">电子钥匙管理</router-link>
							</li>
							<li>
								<router-link to='/index/localmanage2' @click.native="pull">机械钥匙管理</router-link>
							</li>
						</ul>
					</li>
					<li>
						<i class="el-icon-setting"></i> 系统管理
						<span class="el-icon-d-caret"></span>
						<ul class="aside_list">
							<li>
								<router-link to='/index/sysmanage1' @click.native="pull">区域管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage2' @click.native="pull">机构管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage3' @click.native="pull">角色管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage4' @click.native="pull">用户管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage5' @click.native="pull">站点管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage6' @click.native="pull">设施管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage7' @click.native="pull">设备厂商管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage8' @click.native="pull">设备类型管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage9' @click.native="pull">公告管理</router-link>
							</li>
							<li>
								<router-link to='/index/sysmanage10' @click.native="pull">日志查询</router-link>
							</li>
						</ul>
					</li>
				</ul>
			<ul class="content_list">
				<li>门禁钥匙APP1</li>
				<li>门禁钥匙APP2</li>
				<li>门禁钥匙APP3</li>
				<li>门禁钥匙APP4</li>
				<li>门禁钥匙APP5</li>
				<li>门禁钥匙APP6</li>
				<li>门禁钥匙APP7</li>
				<li>门禁钥匙APP8</li>	
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			barShow: false
		}
	},
	methods: {
		// handleOpen(key, keyPath) {
		// 	console.log(key, keyPath);
		// },
		// handleClose(key, keyPath) {
		// 	console.log(key, keyPath);
		// },
		pull(event) {
			event.stopPropagation();
			$('#aside').animate({ width: 0 }, function() {
				$('#aside').css({ display: 'none' });
				$('#main_right').css({ width: 98 + '%' })
			});
			this.$store.dispatch("showPull")
		}
	},
	created() {

	},
	mounted() {
		var self = this;
		$("#aside .aside_title>li").on("click", function() {
			var index=$(this).index();
			$("#aside .content>ul").eq(index).show().siblings().hide();
		})
		$("#aside ul.content_list>li").on("click", function(event) {
			event.stopPropagation();
			$(this).children("ul").slideToggle().end().siblings("li").find("ul").slideUp();
		});
	}
}
</script>


<style scoped>
#aside {
	float: left;
	width: 20%;
	margin-bottom: 64px;
	overflow: hidden;
	/* text-align: center; */
	background-color: #EEF1F6;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#aside ul.aside_title{
	overflow: hidden;
}
#aside ul.aside_title>li {
	line-height: 36px;
	float: left;
	width: 50%;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
}
#aside ul.aside_title>li+li{
	border-left: 1px solid #ccc;
	box-sizing: border-box
}

#aside .content{
	width: 100%;
}
#aside .content_list{
	display: none;
}
#aside .content_list>li{
	width: 100%;
	line-height: 36px;
	position: relative;
	text-align: center;
	cursor: pointer;
	border-top: 1px solid #ccc;
}
#aside .content_list>li>span{
	position: absolute;
	right: 15px;
	top: 13px;
}
#aside .aside_list{
	display: none;
}
#aside .aside_list>li{
	border-top: 1px solid #ccc;
}
#aside .aside_list>li:hover a{
	color: rgba(0, 0, 255, 0.7)
}

#aside a,
#aside li {
	color: #000;
}
</style>